<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>渐变</title>
    <style>
        [class|=linear]{
    width:600px;
    height: 400px;
    margin: 20px auto;
    font-size:2rem;
    color: #fff;
    border: 1px solid rgb(123,331,142);
}
.linear-1{
    background-image: linear-gradient(rgb(212,134,233),purple,rgb(45,233,56),green);
    background-image: -webkit-linear-gradient(rgb(212,134,233),purple,rgb(45,233,56),green);
    background-image: linear-gradient(rgb(212,134,233),purple,rgb(45,233,56),green);
    background-image: -o-linear-gradient(rgb(212,134,233),purple,rgb(45,233,56),green);
}
    </style>
    </head>
       
<body>
    <div class="linear-1"></div>
</body>
</html>